<template>
  <div id="app">
    <router-view />
    <van-tabbar v-model="active" @change="onChange" fixed>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="star-o" to="/favorites">收藏</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/profile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default {
  name: 'App',
  setup() {
    const active = ref(0)
    const router = useRouter()
    const route = useRoute()

    // 根据当前路由设置active值
    const updateActiveByRoute = () => {
      const routes = ['/home', '/favorites', '/profile']
      const currentIndex = routes.indexOf(route.path)
      if (currentIndex !== -1) {
        active.value = currentIndex
      }
    }

    // 监听路由变化
    watch(() => route.path, () => {
      updateActiveByRoute()
    }, { immediate: true })

    const onChange = (index) => {
      const routes = ['/home', '/favorites', '/profile']
      router.push(routes[index])
    }

    return {
      active,
      onChange
    }
  }
}
</script>

<style>
#app {
  min-height: 100vh;
  background-color: #f7f8fa;
}
</style>